<#--
/**
 * Copyright 2012 Claude Houle claude.houle@gmail.com
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
-->
<#macro datetimepicker
		i18n
		id=""
		class=""
		changeYear="true"
		dateFormat="yy-mm-dd"
		defaultDate="new Date()"
		firstDay=1
		hour=0
		hourMax=23
		hourMin=0
		minute=0
		minuteMax=59
		minuteMin=0
		second=0
		secondMax=59
		secondMin=0
		showCalendarButton=false
		showClearButton=false
		showSecond="false"
		showWeek="false"
		timeFormat="hh:mm"
		value=""
		yearRange="c-100:c+100"
>
<#escape x as x?html>
<div id="${id}_wrapper" data-fieldId="${id}" class="uic-date-time-picker ${class}">
	<input id="${id}" type="text" value="${value}" />
	<#if showCalendarButton>
		<span id="${id}_btn_cal" class="uic-date-time-picker-clear ui-icon ui-icon-calendar"></span>
	</#if>
	<#if showClearButton>
		<span id="${id}_btn_clear" class="uic-date-time-picker-clear ui-icon ui-icon-circle-close"></span>
	</#if>

	<script type="text/javascript">
		$('#${id}').datetimepicker({
			changeYear: ${changeYear},
			closeText: '${i18n("Done")}',
			currentText: '${i18n("Now")}',
			dateFormat: '${dateFormat}',
			dayNames: ['${i18n("Sunday")}', '${i18n("Monday")}', '${i18n("Tuesday")}', '${i18n("Wednesday")}', '${i18n("Thursday")}', '${i18n("Friday")}', '${i18n("Saturday")}'],
			dayNamesMin: ['${i18n("ShortSunday")}', '${i18n("ShortMonday")}', '${i18n("ShortTuesday")}', '${i18n("ShortWednesday")}', '${i18n("ShortThursday")}', '${i18n("ShortFriday")}', '${i18n("ShortSaturday")}'],
			defaultDate: ${defaultDate},
			firstDay: ${firstDay},
			hour: ${hour},
			hourMax: ${hourMax},
			hourMin: ${hourMin},
			hourText : '${i18n("Hour")}',
			minute: ${minute},
			minuteMax: ${minuteMax},
			minuteMin: ${minuteMin},
			minuteText: '${i18n("Minute")}',
			monthNames: ['${i18n("January")}', '${i18n("February")}', '${i18n("March")}', '${i18n("April")}', '${i18n("May")}', '${i18n("June")}', '${i18n("July")}', '${i18n("August")}', '${i18n("September")}', '${i18n("October")}', '${i18n("November")}', '${i18n("December")}'],
			nextText: '${i18n("Next")}',
			prevText: '${i18n("Previous")}',
			second: ${second},
			secondMax: ${secondMax},
			secondMin: ${secondMin},
			secondText: '${i18n("Second")}',
			showButtonPanel: true,
			showSecond: ${showSecond},
			showWeek: ${showWeek},
			timeFormat: '${timeFormat}',
			timeOnlyTitle: '${i18n("TimeOnly")}',
			timeText : '${i18n("Time")}',
			yearRange: '${yearRange}'
		});

		<#if showClearButton>
			$("#${id}_btn_clear").click( function(){
				$("#${id}").val('');
			} );
		</#if>

		<#if showCalendarButton>
			$("#${id}_btn_cal").click( function(){
				$('#${id}').datetimepicker("show");
			});
		</#if>

	</script>
</div>
</#escape>
</#macro>